<style>
*{
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    font-family: "Helvetica Neue","Arial","PingFang SC","Hiragino Sans GB","STHeiti","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -webkit-touch-callout:none;
    -webkit-font-smoothing: antialiased;
}
b{
    font-weight: 600;
}
svg:not(:root) {
    overflow: hidden;
}
img {
    vertical-align: middle
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    text-decoration: none;
    color: #353535;
}
a:hover {
    text-decoration: none;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b, strong {
    font-weight: 600;
}
dfn {
    font-style: italic;
}
mark {
    background: #ff0;
    color: #000;
}
code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
}
pre {
    white-space: pre-wrap;
}
small {
    font-size: 80%;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: bold;
    margin: 8px 0;
    line-height: 120%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
audio, canvas, video {
    display: inline-block;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
address, caption, cite, code, dfn, em, th, var {
    font-style: normal;
    font-weight: 500;
}
/* placeholder focus */
input:focus::-webkit-input-placeholder ,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus::-moz-input-placeholder,
textarea:focus::-moz-input-placeholder {
    color: transparent;
}
input:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder {
    color: transparent;
}
::-ms-clear {
    display: none;
}
::selection {
    background: #333;
    color: white;
}
textarea {
    overflow: auto;
    vertical-align: top;
    resize:none;
}
/* 定位对齐 */
.pa,.absolute {
    position: absolute
}
.pr,.relative {
    position: relative;
}
.pf,.fixed {
    position: fixed
}
/* 手指 */
.cp,.pointer {
    cursor: pointer;
}
/* 文本对齐 */
.text.center {
    text-align: center;
}
.text.left {
    text-align: left;
}
.text.right {
    text-align: right;
}
/* 浮动对齐 */
.float.left, .float.right {
    display: inline;
}
.float.left {
    float: left;
}
.float.right {
    float: right;
}
.clear {
    clear: both;
    zoom: 1;
    font-size: 0;
    height: 0;
}
.clear:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,1) inset !important;
}
html,body {
    background-color: #fff;
    font-size: 14px;
    font-family: "Helvetica Neue","Arial","PingFang SC","Hiragino Sans GB","STHeiti","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
    line-height: 100%;
    height:100%;
    color: #555;
}
.input{
    margin:10px;
    border-radius: 2px;
    border:1px solid #dedede;
    padding:10px;
    font-size: 16px;
    background:url() no-repeat 8px 10px;
        padding-left: 36px;
        color:#666;
}
</style>
<template>
<div>
    <input class="input" size="50" type="text" @click.stop="open($event,'picker1')" v-model="calendar.items.picker1.value" placeholder="普通日期模式，但限制了开始结束日期，使用了自定义星期标题"><br>
    <input class="input" size="50" type="text" @click.stop="open($event,'picker2')" v-model="calendar.items.picker2.value" placeholder="选择一段时间，不限制开始结束日期，间隔符号使用“.”"><br>
    <input class="input" size="50" type="text" @click.stop="open($event,'picker3')" v-model="calendar.items.picker3.value" placeholder="日期时间模式"><br>

    <input class="input" size="50" type="text" @click.stop="open($event,'picker4')" v-model="calendar.items.picker4.value" placeholder="时间模式"><br>
    <calendar 
    :show.sync="calendar.show"
    :type="calendar.type"
    :value.sync="calendar.value" 
    :x="calendar.x" 
    :y="calendar.y" 
    :begin.sync="calendar.begin" 
    :end.sync="calendar.end" 
    :range.sync="calendar.range"
    :weeks="calendar.weeks"
    :months="calendar.months"
    :sep="calendar.sep">

    </calendar>
</div>
</template>

<script>
import calendar from "./calendar.vue"

export default {
    components:{
        calendar
    },
    data() {
        return {
            // 数据绑定
            calendar:{
                show:false,
                x:0,
                y:0,
                picker:"",
                type:"date",
                value:"",
                begin:"",
                end:"",
                value:"",
                sep:"/",
                weeks:[],
                months:[],
                range:false,
                items:{
                    // 单选模式
                    picker1:{
                        type:"date",
                        begin:"2016-08-20",
                        end:"2016-08-25",
                        value:"2016-08-21",
                        sep:"-",
                        weeks:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                        months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    },
                    // 2个日期模式
                    picker2:{
                        type:"date",
                        value:"",
                        range:true,
                        sep:".",
                    },
                    // 日期时间模式
                    picker3:{
                        type:"datetime",
                        value:"",
                        sep:"-",
                    },
                    // 日期时间模式
                    picker4:{
                        type:"time",
                        value:"",
                    },
                }
            }
        }
    },
     // 处理值的传递
    watch:{
        'calendar.value': function (value) {
            this.calendar.items[this.calendar.picker].value=value
        }
    },  
    methods:{
        // 打开显示选择器
        open(e,type) {
            // 设置类型
            this.calendar.picker=type
            this.calendar.type=this.calendar.items[type].type
            this.calendar.range=this.calendar.items[type].range
            this.calendar.begin=this.calendar.items[type].begin
            this.calendar.end=this.calendar.items[type].end
            this.calendar.value=this.calendar.items[type].value
            // 可不用写
            this.calendar.sep=this.calendar.items[type].sep
            this.calendar.weeks=this.calendar.items[type].weeks
            this.calendar.months=this.calendar.items[type].months

            this.calendar.show=true
            this.calendar.x=e.target.offsetLeft
            this.calendar.y=e.target.offsetTop+e.target.offsetHeight+8
        }
    }
}
</script>